import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { getForumsByGameForPHP } from '@/api/index'
import './index.less'

const Index = () => {
  const navgata = useNavigate()

  const [tab, setTab] = useState([
    {
      name: '关注',
    },
    {
      name: '推荐',
    },
  ])

  const [tabIndex, setTabIndex] = useState(sessionStorage.getItem('initIndex') || 1)

  const ForumsByGameFor = async () => {
    const res = await getForumsByGameForPHP({ gids: 2 })
    setTab(() => {
      tab.push(...res.data.forumlists)
      return [...tab]
    })
  }

  const clickTable = (item, key) => {
    if (key == 0) {
      navgata(`/ys/home/timeline`)
    } else if (key == 1) {
      navgata(`/ys/home/0`)
    } else {
      navgata(`/ys/home/${item.id}`)
    }
    setTabIndex(key)
    sessionStorage.setItem('initIndex',key)
  }

  useEffect(() => {
    ForumsByGameFor()
  }, [])

  return (
    <>
      <div className="mhy-scroll-tab home-scroll-tab">
        <div className="scroll-tab-wrapper">
          <ul>
            {tab.map((item, key) => {
              return (
                <li
                  onClick={() => clickTable(item, key)}
                  key={key}
                  className={[
                    'scroll-tab-item short-text ',
                    tabIndex == key ? 'active' : '',
                  ].join('')}
                >
                  <span>{item.name}</span>
                </li>
              )
            })}
          </ul>
        </div>
      </div>
    </>
  )
}

export default Index
